<template>
    <div class="page-setting">
        <div class="crumbs">
            <router-link to="/">首页</router-link> / <span>消防档案</span> /
            <span class="active">平面图</span>
        </div>
        <el-container :style="{ height: mainH + 'px' }">
            <el-aside class="area-blk" width="400px">
                <h2 class="hd flex">
                    <div class="flex-1 flex v-c">
                        <p class="flex-1">楼栋列表</p>
                        <el-button type="blue" size="mini" @click="newBuilding"
                            >+新增楼栋</el-button
                        >
                    </div>
                    <div class="floor-hd flex v-c">
                        <p class="flex-1">楼层列表</p>
                        <!-- <a href="javascript:;" class="color-primary">+新增</a> -->
                        <el-button type="green" size="mini" @click="newFloor">+新增楼层</el-button>
                    </div>
                </h2>
                <div class="building-info flex">
                    <!-- 楼栋列表start -->
                    <div class="flex-1">
                        <ul class="building-list" :style="{ height: mainH - 107 + 'px' }">
                            <li
                                class="flex v-c"
                                v-for="(item, index) in buildingList"
                                :key="item.id"
                                :class="{ active: activeBuilding && activeBuilding.id === item.id }"
                                @click="selectBuilding(item)"
                            >
                                <p class="flex-1">{{ item.name }}</p>
                                <el-tooltip content="编辑">
                                    <a href="javascript:;" @click.stop="editBuilding(item)">
                                        <i class="el-icon-edit"></i>
                                    </a>
                                </el-tooltip>
                                <el-tooltip content="删除">
                                    <a
                                        href="javascript:;"
                                        class="ml-5"
                                        @click.stop="deleteBuilding(item)"
                                    >
                                        <i class="el-icon-delete"></i>
                                    </a>
                                </el-tooltip>
                            </li>
                            <li class="data-none" v-if="buildingList.length == 0">暂无数据</li>
                        </ul>
                        <pager
                            :currentPage="buildingCurrentPage"
                            :pageSize="pageSize"
                            :total="buildingTotal"
                            @change="onBuilderPageChange"
                            v-if="buildingTotal > 0"
                        ></pager>
                    </div>
                    <!-- 楼栋列表 end -->
                    <!-- 楼层列表 start -->
                    <div class="floor-wrap">
                        <ul class="floor-list" :style="{ height: mainH - 110 + 'px' }">
                            <li
                                v-for="(item, index) in floorList"
                                :key="item.id"
                                :class="{ active: activeFloor.id === item.id }"
                                @click="selectFloor(item)"
                            >
                                <span>{{ item.name }}</span>
                            </li>
                            <li class="data-none" v-if="floorList.length == 0">暂无数据</li>
                        </ul>

                        <pager
                            :currentPage="floorCurrentPage"
                            :pageSize="pageSize"
                            :total="floorTotal"
                            @change="onFloorPageChange"
                            v-if="floorTotal > 0"
                        ></pager>
                    </div>
                    <!-- 楼层列表 end -->
                </div>
            </el-aside>
            <el-main class="census-main plat-main">
                <div class="hd flex v-c" v-if="activeFloor.id">
                    <h4 class="flex-1">
                        楼栋：{{ activeBuilding.name }} &nbsp; 楼层：{{ activeFloor.name }}
                    </h4>
                    <el-button
                        type="green"
                        @click="editFloor"
                        :disabled="!$store.getters.hasEditPermission"
                        >编辑</el-button
                    >
                    <el-button
                        type="danger"
                        @click="deleteFloor"
                        :disabled="!$store.getters.hasEditPermission"
                        >删除</el-button
                    >
                </div>
                <div
                    class="floor-detail mt-20"
                    v-if="floorDetail"
                    :style="{ height: mainH - 110 + 'px' }"
                >
                    <floorMarker
                        :img="floorDetail.path"
                        :coordList="floorDetail.coordinateData"
                        style="width:100%; height:100%"
                    ></floorMarker>
                </div>

                <!-- <Plane></Plane> -->
            </el-main>
        </el-container>

        <!-- 添加/编辑楼栋 start -->
        <el-dialog
            :title="newBuildingTitle"
            :visible.sync="newBuildingVisible"
            v-if="newBuildingVisible"
            width="400px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
        >
            <el-form ref="newBuildingForm" :model="newBuildingForm" label-width="80px">
                <el-form-item
                    label="名称："
                    prop="name"
                    :rules="[{ required: true, message: '请输入名称', trigger: 'change' }]"
                >
                    <el-input
                        placeholder="请输入"
                        type="text"
                        v-model.trim="newBuildingForm.name"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button type="cancel" @click="newBuildingVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    :loading="adding"
                    @click="submitBuildingAction"
                    :disabled="!$store.getters.hasEditPermission"
                    >确定</el-button
                >
            </div>
        </el-dialog>
        <!-- 添加/编辑 end -->
        <!-- 添加/编辑楼层 start -->
        <el-dialog
            :title="newFloorTitle"
            :visible.sync="newFloorVisible"
            v-if="newFloorVisible"
            width="800px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
        >
            <newFloor
                ref="newFloor"
                :activeBuilding="activeBuilding"
                :activeData="editFloorData"
                @submitting="adding = true"
                @success="submitFloorSuccess"
                @fail="adding = false"
            ></newFloor>
            <div slot="footer">
                <el-button type="cancel" @click="newFloorVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    :loading="adding"
                    @click="submitFloorAction"
                    :disabled="!$store.getters.hasEditPermission"
                    >确定</el-button
                >
            </div>
        </el-dialog>
        <!-- 添加/编辑 end -->
    </div>
</template>
<script>
import Plane from "@/components/census/record/DetailPlane.vue"
import pager from "@/components/Pagination.vue"
import newFloor from "@/components/archive/FloorNew"
import floorMarker from "@/components/archive/FloorMarker"
import { mapState } from "vuex"
export default {
    name: "Plat",
    components: {
        Plane,
        pager,
        newFloor,
        floorMarker,
    },
    props: {
        winH: {
            type: Number,
            default: 500,
        },
    },
    data() {
        return {
            pageSize: 20,
            buildingTotal: 0,
            buildingCurrentPage: 1,
            buildingList: [],
            activeBuilding: {},
            newBuildingTitle: "",
            newBuildingVisible: false,
            newBuildingForm: {
                name: "",
            },
            adding: false,
            floorTotal: 0,
            floorCurrentPage: 1,
            floorList: [],
            activeFloor: {},
            editFloorData: null,
            newFloorTitle: "",
            newFloorVisible: false,
            floorDetail: null,
        }
    },
    watch: {},
    computed: {
        mainH() {
            return this.winH - 220
        },
        ...mapState(["siteInfos"]),
    },
    created() {
        this.getBuilding(1)
    },
    methods: {
        getBuilding(page, setActive = true) {
            const params = {
                page: page,
                limit: this.pageSize,
            }
            if (this.siteInfos.userType == 1) {
                params.businessId = this.siteInfos.orgId
            }
            this.$get("/business/firefightingplan/floorListPage", params).then((res) => {
                this.buildingTotal = res.data.totalSize
                this.buildingCurrentPage = page
                this.buildingList = res.data.Items
                if (this.activeBuilding) {
                    this.activeBuilding = this.buildingList.find(
                        (item) => item.id == this.activeBuilding.id
                    )
                }

                if (setActive) {
                    this.activeBuilding = this.buildingList[0] || {}
                    if (this.buildingList[0]) {
                        this.getFloor(this.activeBuilding.id, 1)
                    }
                }
            })
        },
        onBuilderPageChange(page) {
            this.getBuilding(page, false)
        },
        selectBuilding(item) {
            this.activeBuilding = item
            this.getFloor(item.id, 1)
            this.floorDetail = null
        },
        newBuilding() {
            this.newBuildingForm = {
                name: "",
            }
            this.newBuildingTitle = "新增楼栋"
            this.newBuildingVisible = true
        },
        editBuilding(item) {
            this.newBuildingForm = {
                id: item.id,
                name: item.name,
            }
            this.newBuildingTitle = "编辑楼栋"
            this.newBuildingVisible = true
        },
        submitBuildingAction() {
            this.$refs["newBuildingForm"].validate((valid) => {
                if (valid) {
                    this.adding = true
                    this.$post(
                        "/business/firefightingplan/floorAddOrUpdate",
                        this.newBuildingForm
                    ).then(
                        (res) => {
                            this.newBuildingVisible = false
                            this.adding = false
                            this.getBuilding(1, this.buildingList.length == 0)

                            this.$message.success("保存成功")
                        },
                        (error) => {
                            this.adding = false
                            this.$message.error(error.msg)
                        }
                    )
                }
            })
        },
        deleteBuilding(item) {
            this.showConfirm("确定删除该楼栋吗？", () => {
                this.$post("/business/firefightingplan/floorDel", { id: item.id }).then(
                    (res) => {
                        this.getBuilding(1, this.activeBuilding.id == item.id)
                        if (this.activeBuilding.id == item.id) {
                            this.floorDetail = null
                        }
                        this.$message.success("删除成功")
                    },
                    (error) => {
                        this.$message.error(error.msg)
                    }
                )
            })
        },
        getFloor(buildingId, page, setActive = true) {
            this.$get("/business/firefightingplan/storeyListPage", {
                page: page,
                limit: this.pageSize,
                floorId: buildingId,
            }).then((res) => {
                this.floorTotal = res.data.totalSize
                this.floorCurrentPage = page
                this.floorList = res.data.Items
                if (this.activeFloor) {
                    this.activeFloor = this.floorList.find((item) => item.id == this.activeFloor.id)
                }
                if (setActive) {
                    this.activeFloor = this.floorList[0] || {}
                    if (this.activeFloor.id) {
                        this.getFloorDetail()
                    }
                }
            })
        },
        onFloorPageChange(page) {
            this.getBuilding(this.activeBuilding.id, page, false)
        },
        selectFloor(item) {
            this.activeFloor = item
            this.getFloorDetail()
        },
        newFloor() {
            this.editFloorData = null
            this.newFloorTitle = "新增楼层"
            this.newFloorVisible = true
        },
        editFloor() {
            this.editFloorData = JSON.parse(JSON.stringify(this.floorDetail))
            this.newFloorTitle = "编辑楼层"
            this.newFloorVisible = true
        },
        deleteFloor() {
            this.showConfirm("确定删除该楼层吗？", () => {
                this.$post("/business/firefightingplan/storeyDel", {
                    id: this.activeFloor.id,
                }).then(
                    (res) => {
                        this.getFloor(this.activeBuilding.id, 1)
                        this.$message.success("删除成功")
                        this.floorDetail = null
                    },
                    (error) => {
                        this.$message.error(error.msg)
                    }
                )
            })
        },
        submitFloorAction() {
            this.$refs.newFloor.submitAction()
        },
        submitFloorSuccess() {
            this.newFloorVisible = false
            this.getFloor(this.activeBuilding.id, 1, false)
            if (this.editFloorData) {
                this.getFloorDetail()
                this.editFloorData = null
            }
        },
        getFloorDetail() {
            this.$get("/business/firefightingplan/storeyDetails", { id: this.activeFloor.id }).then(
                (res) => {
                    this.floorDetail = res.data
                }
            )
        },
    },
}
</script>
<style scoped lang="less">
.plat-main {
    padding-top: 0 !important;
    .hd {
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.21);
        h4 {
            font-weight: bold;
            font-size: 16px;
            line-height: 1;
        }
    }
}
.building-info {
    padding-top: 10px;
}
.building-list {
    overflow: auto;
    & > li {
        display: flex;
        align-items: center;
        height: 40px;
        padding: 0 10px;
        cursor: pointer;
        border-left: 4px solid transparent;
        &:hover {
            background: rgba(0, 0, 0, 0.6);
        }
        &.active {
            border-color: #3f95ff;
            background: rgba(0, 0, 0, 0.6);
        }
        &.data-none {
            justify-content: center;
            cursor: default;
            height: 100px;
            opacity: 0.5;
        }
    }
}
.floor-hd {
    width: 180px;
    padding-left: 15px;
}
.floor-wrap {
    width: 180px;
    background: rgba(0, 0, 0, 0.6);
    padding: 0 15px;
}
.floor-list {
    overflow: auto;
    & > li {
        display: flex;
        align-items: center;
        height: 40px;
        cursor: pointer;
        border-left: 4px solid transparent;
        &.active {
            // padding: 0 10px;
            // background: #13B4A9;
            // border-radius: 20px;
            & > span {
                background: #13b4a9;
            }
        }
        & > span {
            display: inline-flex;
            height: 20px;
            padding: 0 10px;
            border-radius: 20px;
        }
        &.data-none {
            justify-content: center;
            cursor: default;
            height: 100px;
            opacity: 0.5;
        }
    }
}
.floor-detail {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
